<template>
	<u-popup :show="show" @close="close" :round="10" :safeAreaInsetBottom="false">
		<view class="cont">
			<view class="tit">全部分类</view>
			<view class="all-type">
				<view v-for="(it,ix) in typeList" :key="ix"
				 @click="setCheck(it)"
				 :class="{'active': check === it.id}">
					<image :src="it.icon"></image>
					<view>
						<text>{{it.name}}</text>
					</view>
				</view>
			</view>
			<view class="bots" @click="show = false">
				<text>点击收起</text>
				<image src="../../static/image/version/collec.png"></image>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	props: {
		typeList: {
			type: Array,
			default: () => []
		},
		check: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {
			show: false
		}
	},
	methods: {
		openPop() {
			this.show = true
		},
		close() {
			this.show = false
		},
		setCheck(it) {
			this.$emit('setCheck', it)
		}
	}
}
</script>

<style scoped lang="scss">
.cont {
	box-sizing: border-box;
	padding: 38upx 38upx 0 38upx;
	>.tit {
		font-size: 30upx;
		color: #000000;
		font-weight: 500;
		margin-bottom: 24upx;
	}
}
.bots {
	display: flex;
	align-items: center;
	height: 81upx;
	border-top: 1px solid #F7F7F7;
	justify-content: center;
	>text {
		font-size: 26upx;
		color: #969696;
	}
	>image {
		width: 30upx;
		height: 30upx;
		transform: rotate(180deg);
	}
}
.all-type {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding-bottom: 20upx;
	overflow-y: scroll;
	max-height: 800upx;
	>.active {
		>image {
			border: 2px solid #0b59e0;
		}
	}
	>view {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 16upx;
		>image {
			width: 110upx;
			height: 110upx;
			border: 2px solid transparent;
			margin-bottom: 21upx;
			border-radius: 50%;
		}
		>view {
			font-size: 26upx;
			color: #000000;
			width: 130upx;
			text-align: center;
			min-width: 0;
			>text {
				display: inline-block;
				width: 100%;
				white-space: nowrap;
				  overflow: hidden;
				  text-overflow: ellipsis;
			}
		}
	}
}
</style>